<!-- 组件说明 -->
<template>
  <home-main-template :breadcrumb="breadcrumb">
    <template v-slot:top>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="querayInfo.query"
            clearable
            @clear="requestGoodsList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="requestGoodsList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddGoods">添加需求</el-button>
        </el-col>
      </el-row>
    </template>
    <template v-slot:center>
      <el-table :data="goodsList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="需求名称" prop="goods_name"></el-table-column>
        <el-table-column
          label="物品价格(元)"
          prop="goods_price"
          width="110px"
        ></el-table-column>
<el-table-column
          label="物品数量(元)"
          prop="goods_number"
          width="110px"
        ></el-table-column>
<!--        <el-table-column label="创建时间" width="200px" prop="add_time">-->
<!--          <template v-slot="scope">{{-->
<!--            scope.row.add_time | dateFormat-->
<!--          }}</template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" width="250px">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="rectify_needs(scope.row.goods_id)">编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeById(scope.row.goods_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-slot:bottom>
      <!-- size-change监听每页显示数据数改变 -->
      <!-- current-change监听页码数改变 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querayInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="querayInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
        <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="50%"
   @close="formclose">
<!--    这是表单-->
  <el-form :model="addruleForm" :rules="addUserrules" ref="addruleForm" label-width="110px" status-icon>
  <el-form-item label="需求名称" prop="username">
    <el-input v-model="addruleForm.username"></el-input>
  </el-form-item>
  </el-form>
    <el-form :model="addruleForm" :rules="addUserrules" ref="addruleForm" label-width="110px" >
  <el-form-item label="需求物品总价格" prop="price">
    <el-input v-model="addruleForm.price"></el-input>
  </el-form-item>
  </el-form>
    <el-form :model="addruleForm" :rules="addUserrules" ref="addruleForm" label-width="110px" >
  <el-form-item label="需求物品总数量" prop="num">
    <el-input v-model="addruleForm.num"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary"  @click="sureAddGoods">确 定</el-button>
  </span>
</el-dialog>
           <el-dialog
  title="提示"
  :visible.sync="dialogVisible2"
  width="50%"
   @close="formclose3">
<!--    这是表单-->
  <el-form :model="search_thing" ref="addruleFormref" label-width="110px" status-icon>
  <el-form-item label="需求名称" prop="goods_name">
    <el-input v-model="search_thing.goods_name"></el-input>
  </el-form-item>
  </el-form>
    <el-form :model="search_thing" ref="addruleFormref" label-width="110px" >
  <el-form-item label="需求物品总价格" prop="goods_price">
    <el-input v-model="search_thing.goods_price"></el-input>
  </el-form-item>
  </el-form>
    <el-form :model="search_thing"  ref="addruleFormref" label-width="110px" >
  <el-form-item label="需求物品总数量" prop="goods_number">
    <el-input v-model="search_thing.goods_number"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary"  @click="sureAddGoods2">确 定</el-button>
  </span>
</el-dialog>
    </template>
  </home-main-template>

</template>

<script>
import HomeMainTemplate from "@/components/Needs/HomeMainTemplate";

// import { getGoodsList, removeGoods } from '@/network/list'
import {getGoodsList,removeGoods} from "../../../networks/list";
import {add_xuqiu} from "../../../networks/add_xuqiu";
import {search_needs} from "../../../networks/search_needs";
import {edit_needs} from "../../../networks/eidt_nedds";

export default {
  name: 'List',
  components: {
    HomeMainTemplate
  },
  data() {
    return {
      search_thing:'',
      dialogVisible2:false,
      addUserrules:{
      username:[
           { required: true, message: '请输入你需要的物品名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
      ],
      price:[
           { required: true, message: '请输入价格', trigger: 'blur' }
      ],
       num:[
           { required: true, message: '请输入联系人手机号', trigger: 'blur' }

      ]


    },
      addruleForm:{
        username:'',
        price:'',
        num:''
      },
      dialogVisible:false,
      breadcrumb: ['商品管理', '商品列表'],
      //   查询商品列表
      querayInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      //   商品列表
      goodsList: [],
      //   总数据条数
      total: 0,
    }
  },
  created() {
    this.requestGoodsList()
  },
  computed: {},
  methods: {
    formclose3(){
      this.dialogVisible2=false
    },
    rectify_needs(id){

      search_needs(id).then(
          res=>{
          this.search_thing=res.data
            console.log(this.search_thing);
          }
      )
      this.dialogVisible2=true

    },
    formclose(){
      this.dialogVisible=false
    },
    //获取商品列表
    requestGoodsList() {
      const queray = this.querayInfo
      getGoodsList(queray.query, queray.pagenum, queray.pagesize)
        .then(result => {
          const { data, meta } = result
          //   console.log(data)
          //   console.log(meta)
          if (meta.status !== 200) return this.$message.error(meta.msg)

          this.$message.success(meta.msg)
          this.goodsList = data.goods
          this.total = data.total
        })
        .catch(err => {})
    },
    handleSizeChange(newSize) {
      this.querayInfo.pagesize = newSize
      this.requestGoodsList()
    },
    handleCurrentChange(newPage) {
      this.querayInfo.pagenum = newPage
      this.requestGoodsList()
    },
    removeById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeGoods(id)
            .then(result => {
              const { data, meta } = result
              //   console.log(data)
              //   console.log(meta)
              if (meta.status !== 200) return this.$message.error(meta.msg)

              this.requestGoodsList()
            })
            .catch(err => {})
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    goAddGoods() {
      this.dialogVisible=true

    },
    sureAddGoods(){
      add_xuqiu(this.addruleForm.username,this.addruleForm.price,this.addruleForm.num).then(
          res=>{
            if (res.meta.status!==201){this.$message.error('添加商品失败')};
          this.$message.success('添加商品成功')
          this.dialogVisible=false
          this.requestGoodsList()}
      )
    },
    sureAddGoods2(){
      edit_needs(this.search_thing.goods_id,this.search_thing.goods_name,this.search_thing.goods_price,this.search_thing.goods_number).then(
          res=>{
           if (res.meta.status!==200){this.$message.error('请求失败')}
          this.dialogVisible2=false
          this.requestGoodsList()}
      )
    }
  }
}
</script>

<style scoped>
/*@import url('')*/
</style>
